<!--
  桌面组件
  @author 邵鹏坤 2022年9月19日
  参考window11 桌面
  1 在此处整合桌面图标组件（navBar）&任务栏组件（taskBar）
  2 数据源：
    使用props从使用者（父组件）接受所有的导航列表，用于渲染桌面图标组件（数量，路由，图标，导航名）
-->
<template>
  <div :class="un.e()">
    <NavBar :aliveBar="aliveBar"></NavBar>
    <TaskBar :aliveBar="aliveBar"></TaskBar>
    <Message></Message>
    <Notice></Notice>
  </div>
</template>

<script setup lang="ts">
  import useNamespace from '@/hooks/use-namespace'
  import Message from '@/views/message/message.vue'
  import TaskBar from '@/views/taskBar/taskBar.vue'
  import checkRoute from '@/assets/js/route'
  import NavBar from '@/views/navBar/navBar.vue'
  import Notice from '@/views/notice/notice.vue'
  import { onBeforeMount, ref } from 'vue'
  import { aliveBarType } from '@/winTypes'
  const un = useNamespace('deskTop')
  // 所有导航信息
  const aliveBar = ref([
    {
      icon: 'icon-rongqi',
      route: '/container',
      name: '布局容器'
    },
    {
      icon: 'icon-chukong',
      route: '/button',
      name: '按钮'
    },
    {
      icon: 'icon-wenjianliebiao',
      route: '/crud',
      name: '增删改查'
    },
    {
      icon: 'icon-xiaoxi1',
      route: '/message',
      name: '全局通知'
    },
    {
      icon: 'icon-10dialogue',
      route: '/diaLog',
      name: '桌面弹框'
    }
  ])
  const props = defineProps<{
    aliveBar: aliveBarType[]
  }>()
  onBeforeMount(() => {
    if (props.aliveBar && props.aliveBar.length > 0) {
      aliveBar.value = props.aliveBar
    }
    let routes = checkRoute()
    let newAliveBar: Array<aliveBarType> = []
    routes.forEach((route) => {
      let findResult = aliveBar.value.find((bar) => {
        return route.route === bar.route
      })
      if (findResult) {
        newAliveBar.push(findResult)
      }
    })
    // setTimeout(() => {
    aliveBar.value = newAliveBar
    // }, 1)
  })
</script>

<style lang="scss" scoped>
  .--win-deskTop {
    width: 100vw;
    height: 100vh;
    // background-color: aqua;
    background-image: $background-img;
    background-size: cover;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .maxOrMIn-enter-active {
    transition: all 0.3s;
    position: fixed;
  }

  .maxOrMIn-leave-active {
    transition: all 0.5s;
    position: fixed;
  }

  .maxOrMIn-enter-from,
  .maxOrMIn-leave-to {
    // position: fixed;
    top: 70%;
    left: 50%;
    transform: scale(0.3) translate(-50%, 50%);
    opacity: 0;
  }
</style>
